<!DOCTYPE html>
<html lang="en">
<head>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

    <meta charset="UTF-8">

    <title>菜单页面</title>
    <script>
        window.onload = function () {
            sessionStorage.setItem("positionId",1)
            initWindows(1)
        };

        function modifyPosition(val) {
            sessionStorage.setItem("positionId",val)
            initWindows(val)
            if(val == 1)
                document.getElementById("positionName1").innerHTML = "                            美的全球创新中心 <span class=\"caret\"></span>\n"
            if(val == 2)
                document.getElementById("positionName1").innerHTML = "                            美的总部大楼 <span class=\"caret\"></span>\n"
        }

        //初始化菜品窗口
        function initWindows(positionId) {
            var table = ""
            $.ajax({
                url:"my_window/getWindowsByPosition",
                contentType:"application/json;charset=UTF-8",
                data: { positionId: positionId},
                dataType:"json",
                type:"get",
                success:function (data) {
                    length = data.data.length
                    if(length >= 1){
                        table += "<ul class=\"nav nav-pills nav-stacked\">\n"
                        for(var i = 0;i < length;i++){
                            table += "<li role=\"presentation\"  onclick='initFood("+data.data[i].windowId+")'><a>"+data.data[i].windowName+"</a></li>\n";
                        }
                        table += "</ul>"
                        document.getElementById("windows_left").innerHTML=table
                        initFood(data.data[0].windowId)
                    }else {
                        alert("查无数据！！！")
                    }
                },
                error:function () {
                    alert("error");
                }
            });
        }

        function initFood(windowId) {
            var table = ""
            $.ajax({
                url:"food/getFoodsByWindowId",
                contentType:"application/json;charset=UTF-8",
                data: { windowId: windowId},
                dataType:"json",
                type:"get",
                success:function (data) {
                    length = data.data.length
                    if(length >= 1){
                        for(var i = 0;i < length;i++){
                            table +=
                                "<div class=\"food-outer-layer\">\n" +
                                "                            <img src=\"image/noodle1.jpeg\" class=\"img-thumbnail img-food\">\n" +
                                "                            <div>\n" + "<div class=\"food-title\">"+data.data[i].foodName+"</div>\n" +
                                "                            <div class=\"food-price\">￥"+data.data[i].foodPrice+"</div>\n" +
                                "                        <span class=\"glyphicon glyphicon-plus-sign food-add\" aria-hidden=\"true\" onclick='addFood("+data.data[i].foodId+",\""+data.data[i].foodName+"\","+data.data[i].foodPrice+")'></span>"
                                + "</div>\n" +
                                "                        </div>\n" +
                                "                        <br>";
                        }

                        document.getElementById("foods_right").innerHTML=table
                    }else {
                        alert("查无数据！！！")
                    }
                },
                error:function () {
                    alert("error");
                }
            });
        }

        function addFood(id,name,price) {
            console.log(price)
            var orderList = JSON.parse(sessionStorage.getItem("orderList"))
            var totalPrice = JSON.parse(sessionStorage.getItem("totalPrice"))
            if(orderList == null) orderList = []
            if(totalPrice == null) totalPrice = 0
            orderList.push({
                foodId:id,
                foodName:name,
                foodPrice:price
            })
            totalPrice += price
            sessionStorage.setItem("orderList",JSON.stringify(orderList))
            sessionStorage.setItem("totalPrice",JSON.stringify(totalPrice))
            document.getElementById("totalPrice").innerHTML = "<div id=\"totalPrice\">\n" +
                "                待支付 ￥ "+totalPrice+"\n" +
                "<button type=\"button\" class=\"btn btn-info\" onclick=\"pay()\">去支付</button>\n"+
                "<button type=\"button\" class=\"btn btn-danger\" onclick=\"resetOrderList()\">清空</button>\n"+
                "            </div>"
        }

        function searchFood() {
            var positionId = sessionStorage.getItem("positionId")
            if(null == positionId) positionId = 1
            var table = ""
            $.ajax({
                url:"food/getFoodsBlur",
                contentType:"application/json;charset=UTF-8",
                data: { word: $(foodNameInput).val(),positionId:positionId},
                dataType:"json",
                type:"GET",
                success:function (data) {
                    length = data.data.length
                    if(length >= 1){
                        for(var i = 0;i < length;i++){
                            table +=
                                "<div class=\"food-outer-layer\">\n" +
                                "                            <img src=\"image/noodle1.jpeg\" class=\"img-thumbnail img-food\">\n" +
                                "                            <div>\n" + "<div class=\"food-title\">"+data.data[i].foodName+"</div>\n" +
                                "                            <div class=\"food-price\">￥"+data.data[i].foodPrice+"</div>\n" +
                                "                        <span class=\"glyphicon glyphicon-plus-sign food-add\" aria-hidden=\"true\" onclick='addFood("+data.data[i].foodId+",\""+data.data[i].foodName+"\","+data.data[i].foodPrice+")'></span>"
                                + "</div>\n" +
                                "                        </div>\n" +
                                "                        <br>";
                        }

                        document.getElementById("foods_right").innerHTML=table
                    }else {
                        alert("查无数据！！！")
                    }
                },
                error:function () {
                    alert("error");
                }
            });
        }
        $(function () {
            $('#foodNameInput').bind('keypress',function(event){
                if(event.keyCode == "13")
                    searchFood()
            });
        })
        function pay() {
            // window.location=""
            var orderList = JSON.parse(sessionStorage.getItem("orderList"))
            var totalPrice = JSON.parse(sessionStorage.getItem("totalPrice"))
            console.log(orderList)
            console.log(totalPrice)
        }

        function resetOrderList() {
            sessionStorage.setItem("orderList",null)
            sessionStorage.setItem("totalPrice",0)
            document.getElementById("totalPrice").innerHTML = "<div id=\"totalPrice\">\n" +
                "                待支付 ￥ 0.0 " +
                "<button type=\"button\" class=\"btn btn-info\" onclick=\"pay()\">去支付</button>\n"+
                "            </div>"
        }

        function toIndexH5() {
            window.location = "index.html"
        }
    </script>
    <style>
        #outer_layer {
            width: 360px;
            height: 640px;
            border: 2px solid grey;
            margin-left: 100px;
            margin-top: 50px;
            background-color: #cfe1ec;
            border-radius: 20px;
        }

        #layer1{
            margin-left: 20px;
            margin-top: 20px;
            height: 40px;
            width: 100%;
            float: top;
        }

        #layer2{
            width: 100%;
            padding-left: 10%;
            margin-top: 20px;
            height: 40px;
            float: top;
        }
        #layer3{
            width: 100%;
            padding-left: 3%;
            margin-top: 20px;
            height: 440px;
            float: top;
            border-radius: 20px;
        }

        .float-left{
            float: left;
        }

        #foodNameInput{
            border-radius: 4px;
            width: 70%;
        }

        #positionName{
            /*font-size: 30px;*/
        }
        #windows_left{
            width: 110px;
            float: left;
            height: 100%;
            background-color: white;
            border-radius: 4px;
        }
        #foods_right{
            width: 220px;
            float: right;
            margin-right: 10px;
            height: 100%;
            background-color: white;
            border-radius: 4px;
        }
        .img-food{
            width: 40%;
            float: left;
        }
        .food-add{
            color: blue;
            float: right;
            margin-top: 15px;
        }
        .food-price{
            float: left;
            margin-top: 15px;
        }
        .food-title{
            font-size: 20px;
        }
        .food-outer-layer{
            width: 100%;
            margin-top: 5px;
            padding: 8px;
        }
        #marker-icon{
            margin-top: 2px;
            padding: 5px;
            font-size: 20px;
        }
        #searchFood{
            margin-top: 1px;
        }
        #layer4{
            margin-top: 10px;
            float: top;
            height: 45px;
            width: 100%;
        }
        #totalPrice{
            width: 100%;
            text-align: center;
            font-size: 25px;
            font-weight: bold;
        }
        #positionName1{

        }
    </style>
</head>
<body>
    <div id="outer_layer">
        <div id="layer1">
            <span id="marker-icon" class="glyphicon glyphicon-map-marker float-left" aria-hidden="true" onclick="toIndexH5()"></span>
            <div id="positionName">
                <div class="btn-group">
                    <button type="button"  id="positionName1" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        美的全球创新中心 <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a onclick="modifyPosition(1)">美的全球创新中心</a></li>
                        <li><a onclick="modifyPosition(2)">美的总部大楼</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div id="layer2">
            <input class="form-control float-left" id="foodNameInput" type="text" placeholder="请输入菜名">
            <span class="input-group-btn">
                <button id="searchFood" class="btn btn-default" type="button" onclick="searchFood()">Search</button>
            </span>
        </div>
        <div id="layer3">
            <div id="windows_left"></div>
            <div id="foods_right"></div>
        </div>
        <div id="layer4">
            <div id="totalPrice">
                待支付 ￥ 0.0
                <button type="button" class="btn btn-info" onclick="pay()">去支付</button>
            </div>
        </div>
    </div>
</body>
</html>